<template>
    <ul>
        <li>商品名：{{ goodsData.name }}</li>
        <li>商品价格：{{ goodsData.price }}</li>
        <li>商品描述：{{ goodsData.desc }}</li>
    </ul>
</template>

<script setup>
    import { computed } from 'vue'

    const { id } = defineProps(['id'])

    const goods = [
        { id: 1, name: '商品1', price: 100, desc: '这是商品1的描述' },
        { id: 2, name: '商品2', price: 200, desc: '这是商品2的描述' },
        { id: 3, name: '商品3', price: 300, desc: '这是商品3的描述' }
    ]

    const goodsData = computed(() => goods.find(item => item.id === Number(id)))
</script>

<style scoped>
    ul {
        padding: 10px;
        list-style-type: disc;
    }
    li {
        margin-bottom: 10px;
        text-align: left;
    }
</style>